<template>
	<div id="main">
		<!--聊天记录开始-->
		<div id="chat">
			<ul>
				<li v-for="(item,index) in chatList" :key="index">
					<div v-if="item.flag==1">
						<div class="user_avatar">
							<img v-if="studentData.avatar" :src="studentData.avatar">
							<img v-else src="@/assets/images/wechat/lawyer/lawyerchatroom/user.png">
						</div>
						<div class="user_content">{{item.messageContent}}</div>
					</div>
					<div v-else-if="item.flag==2">
						<div class="admin_avatar">
							<img v-if="lawyerData.avatar" :src="baseUrl+'/static/upload/lawyer/'+lawyerData.avatar">
							<img v-else src="@/assets/images/wechat/lawyer/lawyerchatroom/user.png">
						</div>
						<div class="admin_content">{{item.messageContent}}</div>
					</div>
					<div v-else>
						<div class="chat_message">{{item.messageContent}}</div>
					</div>

				</li>
			</ul>
		</div>
		<!--聊天记录结束-->
		<div class="menu">
			<input v-model="sendData.content" maxlength="140" @input="changeSend()" type="text">
			<img src="@/assets/images/wechat/lawyer/lawyerchatroom/uchatroom_expres.png">
			<img src="@/assets/images/wechat/lawyer/lawyerchatroom/uchatroom_add.png">
			<input type="button" v-show="sendData.flag" value="发送" @click="sendChat()">
		</div>
	</div>
</template>

<script>
	//引入js	
	import router from '@/router/index'
	
	import { studentSelectConsultChat } from '@/api/consultchat'

	import {
		studentFindStudentById
	} from '@/api/student'
	import {
		studentFindLawyerById
	} from '@/api/lawyer'
	import {
		studentFindConsultLawyerById
	} from '@/api/consultlawyer'
	
	import {studentCreateConsultLawyerMessage} from '@/api/wechat'

	export default {
		components: {
		},
		data() {
			return {
				baseUrl: process.env.VUE_APP_BASE_API,

				studentData: {},
				lawyerData: {},
				consultData: {}, //咨询工单详情
				chatList: [

				], //聊天内容列表
				pageData:{
					nowPage:1,
					maxPage:1,
					total:1,
					limit:20
				},
				chatData: {

				}, //聊天内容单条
				sendData: {
					flag: false,
					content: ""
				} //发送的数据
			}
		},
		created:async function() {
			var ajaxData = {}
			var resultData = await studentFindStudentById(ajaxData)
			if(resultData.code==200){
				this.studentData=resultData.data
			}
			
			ajaxData = {}
			ajaxData.id = this.$route.query.id
			resultData = await studentFindConsultLawyerById(ajaxData)
			if(resultData.code==200){
				this.consultData=resultData.data
			}
			
			ajaxData = {}
			ajaxData.id = this.consultData.lawyerId
			resultData = await studentFindLawyerById(ajaxData)
			if(resultData.code==200){
				this.lawyerData=resultData.data
			}
			
			this.ajaxStudentCreateConsultLawyerMessage()
			this.selectConsultChat()
			this.initwebsocket();
		
		},
		beforeMount: function() {


		},
		mounted: function() {

		},
		watch: {
			'chatList': {
				deep: true,
				handler: function(val, oldval) {
					this.$nextTick(() => {
						document.getElementById('chat').scrollTop = document.getElementById('chat')
							.scrollHeight;
					})
				}
			}
		},
		methods: {
			selectConsultChat:async function(){
				var ajaxData={}
				ajaxData.pageNo=this.pageData.nowPage
				ajaxData.pageSize=this.pageData.limit
				ajaxData.sessionKey = 'student'+this.studentData.id+'lawyer'+this.lawyerData.id
				var resultData = await studentSelectConsultChat(ajaxData)
				if(resultData.code==200){
					for(var i in resultData.data.consultChatFindResVoList){
						var chatData = {}
						chatData.messageType = 1
						chatData.messageContent = resultData.data.consultChatFindResVoList[i].messageContent
						if(resultData.data.consultChatFindResVoList[i].senderType==6&&resultData.data.consultChatFindResVoList[i].senderId == this.lawyerData.id){
							chatData.flag = 2
						}else{
							chatData.flag = 1
						}
						this.chatList.push(chatData)
						
					}
				}
			},
			ajaxStudentCreateConsultLawyerMessage:function(){
				var that = this
				var ajaxData = {}
				ajaxData.consultLawyerId=that.consultData.id
				ajaxData.senderName=that.studentData.name+"（"+that.studentData.schoolName+"）"
				ajaxData.recipientOpenid=that.lawyerData.openid
				ajaxData.consultType=that.consultData.consultTypeName
				ajaxData.description=that.consultData.description
				console.log(ajaxData)
				studentCreateConsultLawyerMessage(ajaxData).then(function(res) {
					console.log(res)
				}).catch(function(error) {
					console.log(error);
				})
			},
			initwebsocket: function() { //初始化weosocket
				var that = this;
				var wsurl = process.env.VUE_APP_BASE_WS+"/openApi/websocket/" + 'student' + that.studentData.id;
				that.websock = new WebSocket(wsurl);
				that.websock.onmessage = this.websocketonmessage;
				that.websock.onopen = this.websocketonopen;
				that.websock.onerror = this.websocketonerror;
				that.websock.onclose = this.websocketclose;
			},
			websocketonopen: function() { //连接建立之后执行send方法发送数据
				var that = this;
				that.chatData = {};
				that.chatData.flag = 0;
				that.chatData.messageType = 1;
				that.chatData.messageContent = "连接成功等待对方上线";
				that.chatList.push(that.chatData);
			},
			//连接建立失败
			websocketonerror: function() {
				var that = this;
				that.chatData = {};
				that.chatData.flag = 0;
				that.chatData.messageType = 1;
				that.chatData.messageContent = "连接失败请稍后再试";
				that.chatList.push(that.chatData);
			},
			//数据接收
			websocketonmessage: function(e) {
				var that = this;
				that.chatData = JSON.parse(e.data);
				if (that.chatData.code != '500') {
					that.chatData.flag =2;
				}
				that.chatList.push(that.chatData);
			},
			//数据发送
			websocketsend: function(data) {
				var that = this;
				that.websock.send(data);
			},
			//关闭
			websocketclose: function() {
				var that = this;
				that.chatData = {};
				that.chatData.flag = 0;
				that.chatData.messageType = 1;
				that.chatData.messageContent = "连接已经断开";
				that.chatList.push(that.chatData);
			},
			changeSend: function() {
				var that = this;
				if (that.sendData.content && that.sendData.content.length > 0) {
					that.sendData.flag = true;
				} else {
					that.sendData.flag = false;
				}
			},
			sendChat: function() {
				var that = this;
				if (!that.sendData.content || that.sendData.content.length == 0) {
					alert("请输入数据");
					return 0
				}
				that.chatData = {};
				that.chatData.flag = 1;
				that.chatData.messageType = 1;
				that.chatData.messageContent = that.sendData.content;

				var ajaxData = {}
				ajaxData.senderType = 1
				ajaxData.senderId = that.studentData.id
				ajaxData.recipientType = 6
				ajaxData.recipientId = that.lawyerData.id
				ajaxData.messageType = 1
				ajaxData.messageContent = that.sendData.content
				that.websocketsend(JSON.stringify(ajaxData));
				that.sendData.flag = false;
				that.sendData.content = "";
				that.chatList.push(that.chatData);

			}
		}
	}
</script>

<style lang="scss">
	/*这个特殊不加scoped，不然html和body无法加高度100%*/
	html,
	body {
		height: 100%;
	}

	#main {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		background: #ededed;
		display: flex;
		flex-direction: column;
	}

	#chat {
		flex: 1;
		overflow: auto;
		transition: all 0.3s linear 0s;
	}

	#chat>ul {
		width: 96%;
		margin: auto;
	}

	#chat>ul>li {
		width: 100%;
		margin-top: 10px;
	}

	#chat>ul>li>div {
		width: 100%;
		overflow: hidden;
	}

	.chat_message {
		width: 100%;
		text-align: center;
		color: #ababab
	}

	.admin_avatar {
		float: left;
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 4px;
	}

	.admin_avatar>img {
		width: 100%;
	}

	.admin_content {
		position: relative;
		float: left;
		margin-left: 10px;
		padding: 8px 10px;
		color: #313131;
		max-width: 260px;
		line-height: 24px;
		background: #FFF;
		text-align: justify;
		border-radius: 6px;
	}

	.admin_content:before {
		content: "";
		position: absolute;
		left: -4px;
		top: 14px;
		width: 10px;
		height: 10px;
		transform: rotate(45deg);
		background: #fff;
	}

	.user_avatar {
		float: right;
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 4px;
	}

	.user_avatar>img {
		width: 100%;
	}

	.user_content {
		position: relative;
		float: right;
		margin-right: 10px;
		padding: 10px 10px;
		color: #313131;
		max-width: 260px;
		line-height: 24px;
		background: #95ec69;
		text-align: justify;
		border-radius: 6px;
	}

	.user_content:before {
		content: "";
		position: absolute;
		right: -4px;
		top: 14px;
		width: 10px;
		height: 10px;
		transform: rotate(45deg);
		background: #95ec69;
	}


	.menu {
		width: 100%;
		height: 50px;
		position: relative;
		overflow: hidden;
		background: #f7f7f7;
		border-top: 1px solid #e1e1e1;
		display: flex;

		input[type='text'] {
			flex: 1;
			border: 1px solid #fff;
			margin-top: 7px;
			margin-bottom: 7px;
			margin-left: 10px;
			margin-right: 10px;
			outline: none;
			text-indent: 10px;
		}

		img {
			width: 30px;
			margin-top: 10px;
			margin-right: 20px;
			margin-bottom: 10px;
		}

		input[type='button'] {
			position: absolute;
			right: 5px;
			top: 10px;
			height: 30px;
			width: 50px;
			outline: none;
			border: 1px solid #396;
			background: #396;
			color: #FFF;
		}

	}
</style>
